/**
 * @description 基于antd 开发的react 表情/小图标组件
 * @author 韩
 */
import React from "react";
import { Popover } from "antd";
import { foodzj as Foodzj, foodhg, foodHb, foodkf } from "./src/assets/export";
import style from "./src/style/index.scss"
import EmojiComponent from "./src/js/component.js";
import { useState } from "react";
import { useEffect } from "react";

let test = [foodhg, foodHb, foodkf];

const XxEmoji = (props) => {
    const {
        trigger = "click",// hover focus click 三种触发方式
        style = {},
        bodyStyle = {}
    } = props;

    const [selected, setSelected] = useState(Foodzj);
    const [emoList, setEmoList] = useState([]);


    useEffect(() => {
        setEmoList(test)
    }, [])



    return (
        <>
            <div className="xx-emoji-box" style={{ ...style }}>
                <div className="xx-emoji-body" style={{ ...bodyStyle }}>
                    <Popover trigger={trigger} content={<EmojiComponent setSelected={setSelected} emoList={emoList} />}>
                        <div className="xx-emoji-selected">
                            <img src={selected} alt="" srcSet="" />
                        </div>
                    </Popover>

                </div>
            </div>
        </>
    )
}

export default XxEmoji;